<template>
	<view class="qual">
		<view class="qual-top">证件必传且必须在有效期内，如证件有更新请及时上传并完善证件信息，工作人员会及时为您审核。如显示信息有误，也请上传更新后提交审核。</view>
		<view class="qual-container">
			<view class="qual-section">
				<view class="qual-tit"><text class="qual-h1 required">请选择您的机构类型</text></view>
				<radio-group name="jglx" class="qual-sec qual-flex" @change="jglxChange">
					<label class="radio" v-for="(item,index) in jglx" :key="item.value">
						<radio color="#00922a" :value="item.value" :checked="index === jgjl_cur" /> <text>{{item.name}}</text>
					</label>
				</radio-group>
			</view>
			<view class="qual-cont" v-if="jgjl_cur==0">
				<view class="qual-section">
					<view class="qual-tit"><text class="qual-h1 required">医疗机构执业许可证</text><text class="qual-h2">（复印件盖红章）</text>
					</view>
					<view class="qual-sec qual-flex">
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')">
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-upld" @click="handleUpImg('yljgzyxkz')">
							<image :src="yljgzyxkz" mode="aspectFill"></image>
							<view>+</view>
						</view>
					</view>
				</view>
				<view class="qual-section">
					<view class="qual-tit"><text class="qual-h1">营业执照</text></view>
					<view class="qual-sec qual-flex">
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')">
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-upld" @click="handleUpImg('yyzz')">
							<image :src="yyzz" mode="aspectFill"></image>
							<view>+</view>
						</view>
					</view>
				</view>
				<view class="qual-section">
					<view class="qual-tit"><text class="qual-h1 required">法人身份证上传方式</text></view>
					<radio-group name="frid" class="qual-sec" @change="fridChange">
						<label class="radio qual-ln" v-for="(item,index) in frid" :key="item.value">
							<radio color="#00922a" :value="item.value" :checked="index === frid_cur" /> <text>{{item.name}}</text>
						</label>
					</radio-group>
					<view class="qual-sec qual-flex">
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')" v-if="frid_cur==0">
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2021122911RPF36Q.jpg')"
							v-else-if="frid_cur==1">
							<image src="http://baihang.com.cn/Upload/image/2021122911RPF36Q.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')" v-else>
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-upld" @click="handleUpImg('frsfz')">
							<image :src="frsfz" mode="aspectFill"></image>
							<view>+</view>
						</view>
					</view>
				</view>
				<view class="qual-section">
					<view class="qual-tit"><text class="qual-h1 required">采购人身份证上传方式</text></view>
					<radio-group name="cgid" class="qual-sec" @change="cgidChange">
						<label class="radio qual-ln" v-for="(item,index) in cgid" :key="item.value">
							<radio color="#00922a" :value="item.value" :checked="index === cgid_cur" /> <text>{{item.name}}</text>
						</label>
					</radio-group>
					<view class="qual-sec qual-flex">
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')" v-if="cgid_cur==0">
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')"
							v-else-if="cgid_cur==1">
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')" v-else>
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-upld" @click="handleUpImg('cgrsfz')">
							<image :src="cgrsfz" mode="aspectFill"></image>
							<view>+</view>
						</view>
					</view>
				</view>
				<view class="qual-section">
					<view class="qual-tit"><text class="qual-h1 required">质保协议扫描件</text><text class="qual-h2">（复印件盖红章）</text>
						<view class="qual-down">模板下载</view>
					</view>
					<view class="qual-sec qual-flex">
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')">
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-upld" @click="handleUpImg('zbxysmj')">
							<image :src="zbxysmj" mode="aspectFill"></image>
							<view>+</view>
						</view>
					</view>
				</view>
				<view class="qual-section">
					<view class="qual-tit"><text class="qual-h1 required">采购委托书扫描件</text><text class="qual-h2">（复印件盖红章）</text>
						<view class="qual-down">模板下载</view>
					</view>
					<radio-group name="cgwt" class="qual-sec" @change="cgwtChange">
						<label class="radio qual-ln" v-for="(item,index) in cgwt" :key="item.value">
							<radio color="#00922a" :value="item.value" :checked="index === cgwt_cur" /> <text>{{item.name}}</text>
						</label>
					</radio-group>
					<view class="qual-sec qual-flex">
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg')" v-if="cgwt_cur==0">
							<image src="http://baihang.com.cn/Upload/image/2022010404SU74QN.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-demo"
							@click="handlePreviewImage('http://baihang.com.cn/Upload/image/2021122911RPF36Q.jpg')" v-else>
							<image src="http://baihang.com.cn/Upload/image/2021122911RPF36Q.jpg" mode="aspectFill"></image>
							<text>示例</text>
						</view>
						<view class="qual-upld" @click="handleUpImg('cgwtssmj')">
							<image :src="cgwtssmj" mode="aspectFill"></image>
							<view>+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qual-submit">提交审核</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	// 机构类型
	const jglx = [{
			value: 'yljg',
			name: '医疗机构',
			checked: 'true'
		},
		{
			value: 'mz',
			name: '门诊'
		}
	]
	const jgjl_cur = ref(0);
	const jglxChange = (e) => {
		for (let i = 0; i < jglx.length; i++) {
			if (jglx[i].value === e.detail.value) {
				jgjl_cur.value = i;
				break;
			}
		}
	}
	// 法人身份证
	const frid = [{
			value: 'zfm',
			name: '身份证正反面拍照上传',
			checked: 'true'
		},
		{
			value: 'sffyj',
			name: '身份证复印件盖红章'
		},
		{
			value: 'frfyj',
			name: '法人身份证复印件盖红章'
		}
	]
	const frid_cur = ref(0);
	const fridChange = (e) => {
		for (let i = 0; i < frid.length; i++) {
			if (frid[i].value === e.detail.value) {
				frid_cur.value = i;
				break;
			}
		}
	}
	// 采购人身份证
	const cgid = [{
			value: 'zfm',
			name: '身份证正反面拍照上传',
			checked: 'true'
		},
		{
			value: 'sffyj',
			name: '身份证复印件盖红章'
		},
		{
			value: 'frfyj',
			name: '法人身份证复印件盖红章'
		}
	]
	const cgid_cur = ref(0);
	const cgidChange = (e) => {
		for (let i = 0; i < cgid.length; i++) {
			if (cgid[i].value === e.detail.value) {
				cgid_cur.value = i;
				break;
			}
		}
	}

	// 采购人委托书
	const cgwt = [{
			value: 'cgwt',
			name: '采购委托书上传',
			checked: 'true'
		},
		{
			value: 'sxwt',
			name: '手写采购委托（白纸黑字、签字、盖章）'
		}
	]
	const cgwt_cur = ref(0);
	const cgwtChange = (e) => {
		for (let i = 0; i < cgwt.length; i++) {
			if (cgwt[i].value === e.detail.value) {
				cgwt_cur.value = i;
				break;
			}
		}
	}

	const handlePreviewImage = (img) => {
		uni.previewImage({
			current: img, // 当前显示图片的http链接
			urls: [`${img}`]
		});
	}
	// 定义上传的图片字段
	//第一部分
	const yljgzyxkz = ref('');
	const yyzz = ref('');
	const frsfz = ref('');
	const cgrsfz = ref('');
	const zbxysmj = ref('');
	const cgwtssmj = ref('');
	//第二部分

	//上传图片
	const handleUpImg = (val) => {
		uni.chooseImage({
			count: 1, //默认9
			success: (res) => {
				switch (val) {
					case 'yljgzyxkz':
						yljgzyxkz.value = res.tempFilePaths[0];
						break;
					case 'yyzz':
						yyzz.value = res.tempFilePaths[0];
						break;
					case 'frsfz':
						frsfz.value = res.tempFilePaths[0];
						break;
					case 'cgrsfz':
						cgrsfz.value = res.tempFilePaths[0];
						break;
					case 'zbxysmj':
						zbxysmj.value = res.tempFilePaths[0];
						break;
					case 'cgwtssmj':
						cgwtssmj.value = res.tempFilePaths[0];
						break;
				}
			}
		});
		console.log(val)
	}
</script>

<style lang="scss">
	.qual {
		&-top {
			background: #fff1df;
			padding: 30rpx;
			text-align: justify;
			font-size: 26rpx;
			color: $c0;
			line-height: 1.75;
		}

		&-container {
			padding: 30rpx;
		}

		&-tit {
			margin-bottom: 20rpx;
			position: relative;
		}

		&-demo {
			width: 170rpx;
			height: 170rpx;
			border-radius: 5px;
			overflow: hidden;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 50rpx;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			text {
				position: relative;
				z-index: 4;
				background: rgba(0, 0, 0, .4);
				font-size: 26rpx;
				color: $cf;
				padding: 0 20rpx;
				border-radius: 3px;
			}
		}

		&-upld {
			width: 170rpx;
			height: 170rpx;
			border-radius: 5px;
			overflow: hidden;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2px solid #d0d0d0;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
			}

			text {
				position: relative;
				z-index: 4;
				background: rgba(0, 0, 0, .4);
				font-size: 26rpx;
				color: $cf;
				padding: 0 20rpx;
				border-radius: 3px;
			}

			view {
				position: relative;
				z-index: 1;
				font-size: 30rpx;
				color: #c7c7c7;
			}
		}

		&-down {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 30rpx;
			color: #004cab;
		}

		&-h1 {
			font-size: 30rpx;
			color: $c3;
			font-weight: bold;

			&.required::after {
				content: "*";
				color: $red;
				font-size: .7em;
				display: inline-block;
				vertical-align: top;
				margin-left: 2px;
			}
		}

		&-h2 {
			font-size: 30rpx;
			color: $red;
		}

		.radio {
			display: flex;
			align-items: center;

			radio {
				transform: scale(.85);
			}

			.act {
				color: $red;
			}
		}

		&-sec {
			font-size: 30rpx;
			color: $c3;
			margin-bottom: 30rpx;

			label {
				min-width: 260rpx;
			}
		}

		&-flex {
			display: flex;
			align-items: center;
		}

		&-ln {
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-submit {
			background: $main-color;
			font-size: 30rpx;
			color: $cf;
			text-align: center;
			padding: 15rpx 0;
		}
	}
</style>